<template>
  <div class="login">
    <div class="header">
      <LoginHeaderView />
    </div>
    <div class="content">
      <template v-if="showLogin">
        <LoginContainer />
      </template>
      <template v-else>
        <RegisterContainer />
      </template>
    </div>
  </div>
</template>
<script lang="ts">
import { computed, defineComponent } from 'vue';
import LoginContainer from '@/components/login/login-content/LoginContainer.vue';
import LoginHeaderView from '@/components/login/login-header/LoginHeaderView.vue';
import RegisterContainer from '@/components/login/register-content/RegisterContainer.vue';
import { useLoginBasicStore } from '@/store/login';

export default defineComponent({
  components: {
    LoginHeaderView,
    LoginContainer,
    RegisterContainer,
  },
  setup() {
    // store
    // 登录基础store
    const loginBasicState = useLoginBasicStore();

    // conputed
    // 是否展示登录口
    const showLogin = computed<boolean>(() => {
      return loginBasicState.showLogin;
    });
    return { showLogin };
  },
});
</script>
<style lang="less" scoped>
.login {
  background-image: url('../../assets/image/login.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}
</style>
